<template>
  <div class="app-container">
    <div class="table-container">
      <div class="left">
        <to-link :val="permissionsBtn.add" @to="handleOpen">
          <el-button size="small" type="primary">添加</el-button>
        </to-link>
      </div>
    </div>
    <div class="_list">
      <div class="menu_list">
        <table class='tree-table-th'>
          <tr>
            <td class="name">分类名称</td>
            <td class="td">排序</td>
            <td class="td">ID</td>
            <td class="td">父类ID</td>
            <td class="td">操作</td>
          </tr>
        </table>
        <div class="list">
          <el-tree class="treeMenu" :data="dataList" ref="tree" :props="props" show-checkbox :expand-on-click-node="false">
            <div class='custom-tree-node' slot-scope="{ node, data }">
              <span class='treeName'>{{data.name}}</span>
              <div class='tree-node'>
                <table class='tree-table'>
                  <tr>
                    <td class='td'>{{data.sort}}</td>
                    <td class='td'>{{data._id}}</td>
                    <td class='td'>{{data.parentId}}</td>
                    <td class='td'>
                      <to-link :val="permissionsBtn.add" @to="addMenu(data)">
                        <el-button size="mini" type='text'>添加</el-button>
                      </to-link>
                      <to-link :val="permissionsBtn.edit" @to="editMenu(data)">
                        <el-button size="mini" type='text'>编辑</el-button>
                      </to-link>
                      <to-link :val="permissionsBtn.del" @to="handle_Delete(data)">
                        <el-button size="mini" type='text'>删除</el-button>
                      </to-link>
                    </td>
                  </tr>
                </table>
              </div>
            </div>
          </el-tree>
        </div>
      </div>
    </div>
    <div class="pages">
      <div class="left">
        <to-link :val="'PmEc3qVnn'" @to="handleAll">
          <el-tooltip class='item' effect='dark' content='批量删除' placement='top'>
            <el-button size="small" type="danger">批量删除</el-button>
          </el-tooltip>
        </to-link>
      </div>
    </div>
    <el-dialog title="分类添加" :visible.sync="dialogVisible" width="32%" top="5vh" :before-close="beforeClose">
      <el-form ref="dialogForm" :model="form" :rules="dialogFormRules" label-width="110px">
        <el-form-item label="类型" prop="parentId">
          <el-select v-model="form.typeId" placeholder="请选择" disabled>
            <el-option v-for="item,key in typeIdList" :key="key" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="父分类" prop="parentId">
          <el-select v-model="form.parentId" v-if="optionList.length > 0"  placeholder="请选择">
            <el-option v-for="item,key in optionList" :key="key" :label="item.name" :value="item._id"></el-option>
          </el-select>
          <el-select v-model="form.parentId" v-else placeholder="请选择">
            <el-option v-for="item,key in option" :key="key" :label="item.name" :value="item._id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="缩略图" v-if="form.typeId === '1' || form.typeId === '2'" prop="img_path">
          <upload v-model="form.img_path" @upload-success="upload_success">
            <img :src="form.img_path" v-if="form.img_path" class="avatar" />
            <i class="el-icon-plus" v-if="!form.img_path"></i>
          </upload>
        </el-form-item>
        <el-form-item label="排序数" prop="sort">
          <el-input-number v-model="form.sort" :min="1" :max="10" label="排序数"></el-input-number>
        </el-form-item>
        <el-form-item label="分类名称" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="分类介绍" v-if="form.typeId === '1' || form.typeId === '2'" prop="describe">
          <el-input v-model="form.describe"></el-input>
        </el-form-item>
        <el-form-item label="分类连接" v-if="form.typeId === '3'" prop="describe">
          <el-input v-model="form.link"></el-input>
        </el-form-item>
        <el-form-item label="分类关键词" v-if="form.typeId === '3'" prop="describe">
          <el-input v-model="form.keywords" placeholder="填写分类描述关键词keywords"></el-input>
        </el-form-item>
        <el-form-item label="分类描述" v-if="form.typeId === '3'" prop="describe">
          <el-input v-model="form.description" type="textarea" placeholder="填写分类描述description"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleSubmit('dialogForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import mixinsTable from '@/utils/mixins.table'
import Upload from '@/components/Upload'
export default {
  name: 'categoryList',
  mixins: [mixinsTable],
  data() {
    return {
      servicePath: '/product/category',
      form: {
        img_id: '',
        name: '',
        typeId: '',
        describe: '',
        parentId: '-1',
        link: '',
        keywords: '',
        description: '',
        sort: '',
        img_path: ''
      },
      permissionsBtn: {
        add: this.$route.params.name === 'article' ? 'ifGLxDo-i' : this.$route.params.name === 'product' ? 'mxHGXfQ3D' : '',
        edit: this.$route.params.name === 'article' ? '3Cyqqa2W-' : this.$route.params.name === 'product' ? 'XRSN1WHsc' : '',
        del: this.$route.params.name === 'article' ? 'uPr4iowvX' : this.$route.params.name === 'product' ? 'VQ9fdmLeD' : ''
      },
      typeIdList: [{
        id: '1',
        name: '文章分类'
      }, {
        id: '2',
        name: '商品分类'
      }, {
        id: '3',
        name: '导航分类'
      }],
      props: {
        value: '_id',
        label: 'name'
      },
      dialogFormRules: {
        name: [
          { required: true, message: '分类名称不能为空', trigger: 'blur' }
        ],
        parentId: [
          { required: true, message: '父类ID不能为空', trigger: 'blur' }
        ],
        sort: [
          { required: true, message: '排序数不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  components: {
    Upload
  },
  // 刷新数据
  watch: {
    '$route': function(val) {
      if (val) {
        this.getDada()
      }
    }
  },
  created() {
    this.getDada()
  },
  methods: {
    initForm(row) {
      this.setFormVal(row)
    },
    beforeClose(done) {
      this.optionList = []
      done()
    },
    getDada() {
      const name = this.$route.params.name
      this.params.type = name === 'article' ? '1' : this.$route.params.name === 'product' ? '2' : '3'
      this.params._type = '2'
      this.getList()
    },
    getOptionListData() {
      console.log()
      const name = this.$route.params.name
      this.params.type = name === 'article' ? '1' : this.$route.params.name === 'product' ? '2' : '3'
      this.getOptionList({ type: this.params.type })
    },
    FormClear() {
      const name = this.$route.params.name
      this.params.type = name === 'article' ? '1' : this.$route.params.name === 'product' ? '2' : '3'
      this.$set(this.form, 'typeId', this.params.type)
      this.$set(this.form, 'img_id', '')
      this.$set(this.form, 'img_path', '')
      this.$set(this.form, 'name', '')
      this.$set(this.form, 'describe', '')
      this.$set(this.form, 'parentId', '-1')
      this.$set(this.form, 'sort', '')
      this.$set(this.form, 'link', '')
      this.$set(this.form, 'keywords', '-1')
      this.$set(this.form, 'description', '')
      this.$set(this.form, '_id', '')
      this.$set(this.form, 'level', 0)
    },
    editMenu(data) {
      this.getOptionListData() // 打开分类
      this.handleUpdata(data)
    },
    addMenu(row) {
      this.$set(this.form, 'parentId', row._id)
      const name = this.$route.params.name
      this.params.type = name === 'article' ? '1' : this.$route.params.name === 'product' ? '2' : '3'
      this.$set(this.form, 'typeId', this.params.type)
      this.$set(this.form, 'name', '')
      this.$set(this.form, 'describe', '')
      this.$set(this.form, 'img_id', '')
      this.$set(this.form, 'img_path', '')
      this.$set(this.form, 'sort', '')
      this.$set(this.form, 'link', '')
      this.$set(this.form, 'keywords', '-1')
      this.$set(this.form, 'description', '')
      if (row && row._id) {
        this.$set(this.form, '_id', row._id)
      }
      this.$set(this.form, 'level', (row.parentId === '-1' ? row.level + 1 : row.level) + 1)
      this.getOptionListData() // 更新分类
      this.dialogState = 'create'
      this.dialogVisible = true
      this.isDisabled = false
    },
    setFormVal(row) {
      const formArr = Object.keys(row)
      formArr.map(item => {
        this.$set(this.form, item, this.dialogState === 'update' ? row[item] : '')
      })
    },
    handle_Delete(row) {
      this.$confirm('确认删除该记录吗？', '提示', { type: 'warning' })
        .then(() => {
          if (row.isChildren) {
            this.$message.warning('有子类不能删除')
            return
          }
          this.moduleService.delete({ id: row._id }).then(response => {
            this.$message.success('删除成功')
            this.getList()
          })
        })
    },
    upload_success(val) {
      this.$set(this.form, 'img_id', val.mid)
    }
  }
}

</script>
<style lang="scss">
.tree-table-th{
  padding: 10px 0;
  border-bottom: 1px solid #ebeef5;
  font-size:13px;
  color:#666;
  background-color: #f5f5f5;
  .name{
    width:300px;
    padding-left:42px;
  }
  .td{
    width:400px;
    text-align: center;
  }
}
.tree-node{
  position: absolute;
  top:0;
  left:0;
  right:0;
  padding-left:265px;
  overflow: hidden;
}
.custom-tree-node{
  font-size:13px;
  color:#666;
  width: 100%;
  .td{
    width:460px;
    text-align: center;
    line-height: 41px;
  }
   .name{
    line-height: 41px;
    text-align:left ;
  }
}


</style>
